<template>
  <div class="text-container">
    <div :class="['chat-bubble', inversion ? 'chat-bubble-send' : '']">
      <div v-html="renderText"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import MarkdownIt from "markdown-it";

const props = defineProps({
  text: {
    type: String,
    required: true,
  },
  inversion: {
    type: Boolean,
    default: false,
  },
  asRawText: {
    type: Boolean,
    default: true,
  },
});

const mdi = MarkdownIt({
  html: true,
  linkify: true,
});

const renderText = computed(() => {
  return mdi.render(props.text);
});
</script>

<style lang="less" scoped>
@import url(./style.less);

.text-container {
  .chat-bubble {
    padding: 18px 12px;
    background-color: #fff;
    border-radius: 0 12px 12px 12px;
  }

  .chat-bubble-send {
    background-color: #bdd2ff;
    border-radius: 12px 0 12px 12px;
  }
}
</style>
